<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item">
				<view class="input">
					<input v-model="proId" type="text" placeholder="请输入货号" />
					<button style="margin-left: 10rpx;" @tap="open">选择</button>
					<button style="margin-left: 10rpx;" @tap="add">{{index===-1?'添加':'修改'}}</button>
				</view>
			</view>

			<view class="form_item1">
				<view class="text"> <text>*</text>数量: </view>
				<view class="input">
					<input ref="number" :focus="focus" v-model="orderNum" @blur="onblur" type="digit"
						placeholder="请输入数量" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text>*</text>单价: </view>
				<view class="input">
					<input ref="input" v-model="price" type="digit" placeholder="请输入单价" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text" style="text-indent: 1em;"> 金额:</view>
				<view class="input">
					<input style="color:#c0c0c0"  disabled="true" :value="realPrice | unifyNumber" type="digit" placeholder="请输入金额" />
				</view>
			</view>
			<view class="form_item1 last">
				<view class="text"> 备注: </view>
				<view class="input">
					<input v-model="remark" type="text" placeholder="请输入备注" />
				</view>
			</view>

			<!-- <view class="footer_btn">
				<button @tap="add">立即添加</button>
			</view> -->

			<u-popup mode="center" closeOnClickOverlay :show="proShow" @close="proClose" @open="proOpen">
				<view class="popup">
					<h3 style="text-align: center;margin-bottom: 20rpx;">当前产品为新增，请设置散拿价？</h3>
					<input v-model="proPrice" :focus="proInputFocus" ref="proInput" type="digit" placeholder="请输入价格" />
					<view class="proShow">
						<view @tap="proShow=false">取消</view>
						<view @tap="setPrice">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<Prop @close="close" ref="child" @saveUser="saveUser" />
	</view>
</template>

<script>
	import {
		cal
	} from '@/utils/cal.js';
	import Prop from "../../components/prop.vue";
	export default {
		data() {
			return {
				// 货号
				proId: "",
				remark: "",
				// 数量
				orderNum: "",
				// 单价
				price: "",
				// 金额
				// realPrice: "",
				// 备注
				remark: "",
				proType: "",
				cid: "",
				focus: false,
				proInputFocus: false,
				index: -1,
				proTypeName: '',
				proSku: "",
				proShow: false,
				proPrice: "",
				flag: true,
				// 订单时间
				orderDay: "",
				cname: ""
			};
		},
		components: {
			Prop,
		},

		computed: {
			realPrice: {
				get() {
					return cal.chu(cal.cheng(cal.cheng(this.orderNum, 100), cal.cheng(this.price, 100)), 10000)
						.toNumber()
				},
				set() {
					return cal.chu(cal.cheng(cal.cheng(this.orderNum, 100), cal.cheng(this.price, 100)), 10000)
						.toNumber()
				}
			}
		},
		methods: {
			setPrice() {
				this.$api.productCreateOrEditApi({
					proId: this.proId,
					proPrice: this.proPrice,
					remark: this.remark
				}).then(res => {
					this.proShow = false
					this.flag = true
					// console.log(res.result);
					this.proSku = res.result.proSku
					uni.showToast({
						title: "设置成功",
						icon: "none"
					})
				})
			},
			proClose() {
				this.proShow = false
			},
			proOpen() {
				this.proShow = true
			},
			handleNum(e) {
				this.$nextTick(() => {
					if (e.detail.value <= 0) {
						this.orderNum = ''
					} else {
						this.orderNum = Math.floor(e.detail.value) || 1
					}
				})
			},
			handleInput(e) {

				this.$nextTick(() => {
					this.price = Math.trunc(e.detail.value * 10000) / 10000 || ""
				})
			},
			// 提交
			add() {
				if (
					this.proId == ""
				) {
					uni.showToast({
						title: "请输入货号",
						icon: "none",
					});
				} else if (!this.orderNum) {
					uni.showToast({
						title: "请输入数量",
						icon: "none",
					});
				} else if (this.orderNum == "0") {
					uni.showToast({
						title: "数量不能为零",
						icon: "none",
					});
				} else if (this.price == "") {
					uni.showToast({
						title: "请输入单价",
						icon: "none",
					});
				} else {
					if (this.index !== -1) {
						this.$store.state[this.proTypeName][this.index].proId = this.proId
						this.$store.state[this.proTypeName][this.index].orderNum = this.orderNum
						this.$store.state[this.proTypeName][this.index].price = this.price
						this.$store.state[this.proTypeName][this.index].realPrice = this.realPrice
						this.$store.state[this.proTypeName][this.index].remark = this.remark
						this.$store.state[this.proTypeName][this.index].proType = this.proType
						this.$store.state[this.proTypeName][this.index].proSku = this.proSku
					} else {
						this.$api.qryProductInfoApi({
							cid: this.cid,
							proId: this.proId
						}).then(async res => {
							if (res.result.list.length == 0) {
								this.proShow = true

								this.$nextTick(() => {
									this.proInputFocus = true
									// console.log(this.$refs.proInput);

								})
								this.flag = false
								return
							}
							if (this.flag) {
								await this.$api.checkProductInfoApi({
									cid: this.cid,
									cname: this.cname,
									proSku: this.proSku,
									realPrice: this.price,
									proId: this.proId,
									orderDay: this.orderDay
								})
								await this.$api.updateProductInfoApi({
									cid: this.cid,
									cname: this.cname,
									proSku: this.proSku,
									realPrice: this.price,
									proId: this.proId,
								})
								this.$store.commit(
									`${this.proType == "0" ? "addProduct" : "returnProduct"}`, {
										// 货号
										proId: this.proId,
										// 数量
										orderNum: +this.orderNum,
										// 单价
										realPrice: this.price,
										// 金额
										// realPrice: +this.realPrice,
										// 备注
										remark: this.remark,
										// 类型
										proType: this.proType,
										// 编辑
										disabled: true,

										proSku: this.proSku,


									}
								);


								uni.showToast({
									title: "添加成功",
									icon: "none",
								});
								uni.navigateBack({
									delta: 1,
								});
							}
						})



					}


				}
			},
			// 打开客户筛选
			open() {
				this.$refs.child.open();
				// console.log(this.$refs.input.focus())
				// this.focus = true
				// console.log(this.focus)
			},
			onblur() {
				this.focus = false
			},
			saveUser(data) {
				this.proId = data.proId;
				this.$api
					.qryProductInfoApi({
						cid: this.cid,
						proId: this.proId
					})
					.then((res) => {
						if (res.code == 200) {
							// this.orderNum = res.result.list[0].proNum;
							this.price = res.result.list[0].proPrice;
							this.remark = res.result.list[0].remark;
							this.proSku = res.result.list[0].proSku;
							this.realPrice = Math.floor(this.orderNum * this.price * 100) / 100;
							// console.log(this.price)
						}
					});
				this.$refs.child.close();
			},
			close() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
		},

		created() {
			if (this.index === -1) {
				this.$nextTick(() => {
					this.open();

				})
			}

		},
		onLoad(option) {
			this.proType = option.proType;
			this.orderDay = option.orderDay
			if (this.proType == 0) {
				this.proTypeName = "ShipmentList"
			}
			if (this.proType == 1) {
				this.proTypeName = "returnList"
			}
			if (option.index) {
				this.index = option.index
				let data = this.$store.state[this.proTypeName][option.index]
				this.remark = data.remark
				this.orderNum = data.orderNum
				this.price = data.realPrice
				this.proId = data.proId
				this.proSku = data.proSku
			}
			this.cid = option.cid;
			this.cname = option.cname;
		},


	};
</script>


<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100vh;
	}

	.newOrder {
		background-color: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;
			// margin-top: 38rpx;

			.form_item {
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						color: #000;
						height: 94rpx;
						width: 434rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						color: #fff;
						width: 145rpx;
						height: 75rpx;
						line-height: 75rpx;
						background: #fe3430;
						border-radius: 38rpx;
					}
				}
			}

			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						text-indent: 1em;
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
						color: #000;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.footer_btn {
			margin-top: 74rpx;
			display: flex;
			padding-bottom: 74rpx;

			button {
				background: url("/static/images/user/button.png");
				background-size: 280rpx 124rpx;
				width: 280rpx;
				height: 124rpx;
				line-height: 96rpx;
				color: #ffffff;
			}
		}

		.last {
			text-indent: 1em;
		}
	}

	.popup {
		// height: 140rpx;
		padding: 40rpx 20rpx;
		width: 700rpx;
		height: 350rpx;
		border-radius: 50rpx;

		input {
			height: 80rpx;
			background: #f3f3f3;
			border-radius: 60rpx;
			text-indent: 1em;
		}

		.proShow {
			display: flex;
			justify-content: space-around;

			view {
				margin-left: 10rpx;
				background-color: #fe3430;
				border-radius: 50rpx;
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				margin: 40rpx auto;
			}
		}
	}
</style>